<template>
  <div>
    <el-dialog
      :visible="dialogConfig.status"
      :title="dialogConfig.title"
      :width="dialogConfig.width"
      :modal-append-to-body="false"
      @close="closeDialog"
      @closed="closedDialog"
    >
      <slot name="content" />
      <template v-slot:footer>
        <span v-if="$slots.footer">
          <slot name="footer" />
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MyDialog',
  data() {
    return {
      dialogConfig: {
        status: false,
        title: '',
        width: '951.5px',
      },
    }
  },
  methods: {
    closeDialog() {
      this.$emit('close')
    },
    closedDialog() {
      this.$emit('closed')
    },
    modifyDialogConfig({ status, title, width } = this.dialogConfig) {
      this.dialogConfig.status = status
      this.dialogConfig.title = title
      this.dialogConfig.width = width
    },
  },
}
</script>

<style>
</style>
